
<template>
  <div class="all">
    <h1 style="text-align:center">创建贴吧</h1>
    <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
      <el-form-item label="barName">
        <el-input v-model="formLabelAlign.barName" />
      </el-form-item>
      <el-form-item label="description">
        <el-input v-model="formLabelAlign.description" type="textarea" />
      </el-form-item>
      <el-form-item label="barLogo">
        <el-upload class="avatar-uploader" :action="`${baseUrl}/upload/image`" :headers="headers" :name="`image`"
          :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width="300" />
          <el-icon v-else class="avatar-uploader-icon" style="background:brown">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="creator">
        <el-input v-model="formLabelAlign.creator" />
      </el-form-item>
      <el-form-item label="" size="normal">
        <el-button type="primary" size="default" @click="computedCreate">确定创建</el-button>
        <el-button type="primary" size="default" @click="computedBack">返回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'CreateTieba',
});
</script>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import pinia from '@/stores';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";

//请求
import Tieba from '@/api/tieba'

import type { UploadProps } from 'element-plus'

const store = useUserStore(pinia)

const router = useRouter();

//通过计算属性拿到路由中的某些信息
// const headers = computed(() => {
//   return "Bearer" + " " + store.token
// });
// console.log(headers, "headers");

const headers = ref({
  Authorization: "Bearer" + " " + store.token
})
console.log(headers, "headers");


const labelPosition = ref('right')
const formLabelAlign = reactive({
  barName: '',
  description: '',
  barLogo: '',
  creator: '',
})

/* 环境变量读取图片url */
const baseUrl = import.meta.env.VITE_APP_API;


const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(response, "response");
  // imageUrl.value = response.data.url
  formLabelAlign.barLogo = response.data.url
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const computedCreate = async () => {
  // console.log(formLabelAlign, "formLabelAlign");
  await Tieba.reqeustCreateTieba(formLabelAlign)
  alert("上传成功")
  router.back()
}
const computedBack = () => {

  // const router = useRouter();
  console.log(router, "router");
  router.back()
}


</script>



<style scoped>
body {}

.all {
  width: 1000px;
  margin: 0 auto;
  background-color: paleturquoise;
}


.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
